<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ZUI - Open Source HTML5 Cross-Screen Framework</title>

  <link href="../dist/css/zui.min.css?v=1.10.0" rel="stylesheet">
  <link href="../docs/css/doc.min.css?v=1.10.0" rel="stylesheet">
  <style id="themeStyle"></style>

  <link rel="shortcut icon" href="../docs/favicon.ico" type="image/x-icon">
  <link rel="icon" href="../docs/favicon.ico" type="image/x-icon">

  <!--[if lt IE 9]>
    <script src="dist/lib/ieonly/html5shiv.js"></script>
    <script src="dist/lib/ieonly/respond.js"></script>
    <script src="dist/lib/ieonly/excanvas.js"></script>
  <![endif]-->
</head>
<body>
<header id="header" class="bg-primary">
  <div class="navbar navbar-inverse navbar-fixed-top" id="navbar" role="banner">
    <div class="container">
      <div class="navbar-header">
        <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".zui-navbar-collapse">
          <span class="sr-only">Switch Navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="/" class="navbar-brand"><span class="path-zui-36"><i class="path-1"></i><i class="path-2"></i></span> <span class="brand-title">ZUI</span> &nbsp;<small class="format-pkg zui-version" data-fmt-text="{version}"></small> <i data-toggle="tooltip" id="compactTogger" data-placement="bottom" class="icon icon-home"></i></a>
      </div>
      <nav class="collapse navbar-collapse zui-navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li id="navDownloadLink"><a title="download now" class="format-pkg" data-fmt-href="../docs/download/zui-{version}-dist.zip" target="_blank"><i class="icon icon-download-alt"></i><span> Download Now</span></a></li>
          <li><a title="Forum" href="http://forum.zui.sexy/forum/" target="_blank"><i class="icon icon-comments-alt"></i><span> Forum</span></a></li>
          <li><a title="Star ZUI on GitHub" href="https://github.com/easysoft/zui" target="_blank"><i class="icon icon-github"></i><span> Star</span></a></li>
          <li id="langSwitcher"><a title="Switch language" href="../"><i class="icon icon-globe"></i><span> 中文</span></a></li>
        </ul>
      </nav>
    </div>
  </div>
  <div id="headContainer">
    <div class="container">
      <div id="heading">
        <h1>ZUI</h1>
        <p>An open source front-end customized solution based on Bootstrap and helps you quickly build modern cross-screen applications.</p>
        <div id="download">
          <a data-fmt-href="../docs/download/zui-{version}-dist.zip" class="btn btn-primary btn-lg format-pkg">Download Now <i class="icon icon-download-alt"></i></a>
          <a href="#basic/download" class="btn btn-white btn-lg">Quick Start<i class="icon icon-hand-right"></i></a>
          <p><small>Latest Version <span class="format-pkg" data-fmt-text="{version}"><i class='icon icon-spin icon-spinner-indicator'></i></span> &nbsp; <a title="Update log" style="color: #f1f1f1" href="#learn/newly">Update Log</a> &nbsp; <a style="color: #f1f1f1" href="https://github.com/easysoft/zui/archive/master.zip" target="_blank">Source Code</a></small></p>
        </div>
        <p><span data-toggle="tooltip" data-html="true" title="Please add reason for joining the group, &lt;br&gt;or enter a secret code: ZUI is sexy">QQ Group：127535859</span> &nbsp; <a href="http://forum.zui.sexy/forum/" style="color: #f1f1f1" target="_blank"><i class="icon icon-comments-alt"></i> Forum</a></p>
      </div>
      <div id="search">
        <div id="searchForm">
          <input type="text" class="form-control input-lg" id="searchInput" placeholder="Button, control, icon-star..."/>
          <i class="icon icon-search"></i>
          <button id="searchHelpBtn" type="button" class="btn btn-link"><i class="icon icon-question"></i></button>
        </div>
      </div>
    </div>
    <div class="text-center" id="ad">
      <a id="mzui" class="hidden" href="http://zui.sexy/m/" target="_blank"><i class="icon icon-diamond"></i> &nbsp; MZUI &nbsp; // <span class="hidden-xs inline">Designed for mobile </span>Based on Flex</a>
      <a id="xuanxuan" href="http://xuan.im" target="_blank"><i class="icon icon-xuanxuan"></i>Xuan&nbsp; // <span class="hidden-xs inline">free, safe, cross-platform</span>IM solution</a>
    </div>
  </div>
</header>

<!-- New subpage -->
<div id="page">
  <div id="pageHeader">
    <div class="wrapper container">
      <i class="icon icon-star"></i>
      <h2><a class="name" href="###">Icon</a></h2>
      <button type="button" class="btn btn-link" id="pageTogger" title="fold/Expand chapter" data-toggle="tooltip"></button>
      <button data-toggle="tooltip" title="Refresh" type="button" class="btn btn-link" id="pageReloadBtn"><i class="icon-repeat"></i></button>
      <button data-toggle="tooltip" title="shut down（ESC）" type="button" class="btn btn-link path-close-btn path-btn" id="pageCloseBtn"><i class="path-1"></i></button>
    </div>
  </div>
  <div id="pageBody" class="scrollbar-hover">
    <div class="container">
      <div id="pageAttrs" class="clearfix">
        <div class="badge badge-zui" style="display: none" data-toggle="tooltip" title="This component is available in the Standard version.">ZUI</div>
        <div class="badge badge-lite" style="display: none" data-toggle="tooltip" title="This component is available in the Lite version.">LITE</div>
        <div class="badge badge-lib" style="display: none" data-toggle="tooltip" title="This component is provided separately in the lib directory.">LIB</div>
        <a class="badge badge-party" style="display: none" data-toggle="tooltip" title="This is a third-party component. Visit its website" target="_blank"><i class="icon icon-heart"></i> <span class="product-ver"></span></a>
        <a class="badge badge-bootstrap" style="display: none" data-toggle="tooltip" title="The component was originally from Bootstrap. Visit Bootstrap website" target="_blank" href="http://getbootstrap.com/">Bootstrap</a>
        <div class="badge badge-custom" style="display: none" data-toggle="tooltip" title="This component can be split and used."><i class="icon icon-cogs"></i></div>
        <div class="badge badge-version" style="display: none" data-toggle="tooltip" title="The earliest available version of this component is ">1.2.0+</div>
        <div class="badge badge-author hidden" data-toggle="tooltip" title="Author of this document"><i class="icon icon-user"></i> <span class="author-name">Catouse</span></div>

        <a href="#" target="_blank" class="badge badge-source pull-right" data-toggle="tooltip" title="Access documents and fork this project to improve documentation."><i class="icon icon-pencil"></i></a>
        <div class='dropdown pull-right badge-code-dropdown'>
          <button type="button" data-toggle="dropdown" title="View source and package information" class="badge btn btn-link badge-code"><span class="badge-code-source"><i class="icon icon-file-code"></i> <span class="count"></span></span><span class="badge-code-pkgs"><i class="icon icon-cube"></i> <span class="count"></span></span></button>
          <ul class="dropdown-menu"></ul>
        </div>
      </div>
    </div>
    <div class="loader" id="pageLoader"><i class="icon icon-spin icon-spinner-indicator"></i> <span class="loading-text">Loading...</span><span class="error-text">Failed loading. Please check the connection and retry.<br>The other reason might be that the document has not been completed.<br> Welcome to go to <a href="https://github.com/easysoft/zui">Github</a> and <a href="https://github.com/easysoft/zui/fork">Fork</a> this project to improve documentation.</span></div>
    <div class="container">
      <div id="pageContent"></div>
      <nav></nav>
    </div>
  </div>
</div>

<!-- PromptS when accessing the protocol -->
<div id="fileProtocolTip" class="hidden">
  <div class="container-fixed-sm">
    <h1>Not support <code>file://</code> protocol</h1>
    <p>You are using <code>file://</code> protocol to access ZUI documents. ZUI documents need to be loaded asynchronously, so you need to use <code>http://</code> or <code>https://</code> to access it.</p>
    <p>If you downloaded the whole ZUI source code package and the system is already installed <a href="https://nodejs.org/zh-cn/" target="_blank">Node.js</a>, follow the steps below to get access to your documents right away.</p>
    <ol>
      <li>Enter ZUI source code directory;</li>
      <li>Execute <code>npm install</code>;</li>
      <li>Execute <code>npm start</code>；</li>
      <li>Visit <a href="http://127.0.0.1:8088">http://127.0.0.1:8088</a>。</li>
    </ol>
    <p>You can also access online documentation:</p>
    <ul>
      <li>Official website：<a href="http://zui.sexy">http://zui.sexy</a></li>
      <li>Developer website：<a href="http://easysoft.github.io/zui/">https://easysoft.github.io/zui/</a></li>
    </ul>
  </div>
</div>

<div data-placement="left" title="Switch interface layout" data-toggle="tooltip" id="changeViewWrapper">
  <button type="button" class="btn btn-primary" id="changeViewBtn" data-toggle="modal" data-target="#changeViewModal"><i class="icon icon-columns"></i></button>
</div>

<!-- Remote content loading icon -->
<div class="text-muted loader loading"><i class="icon icon-spin icon-spinner-indicator"></i> Loading...</div>

<!-- Content directory -->
<div id="grid" class="scrollbar-hover">
  <div class="container">
    <div class="row">
      <div class="col col-md-d5 col-sm-6">
        <div class="chapter" id="chapter-basic" data-id="basic">
          <div class="chapter-heading fade scale show">
            <h4><i class="icon icon-book"></i> <span class='name'>Basics</span></h4>
          </div>
          <div class="chapter-body" id="sections-basic">
          </div>
        </div>
      </div>
      <div class="col col-md-d5 col-sm-6">
        <div class="chapter" id="chapter-control" data-id="control">
          <div class="chapter-heading fade scale show">
            <h4><i class="icon icon-check-empty"></i> <span class='name'>Controls</span></h4>
          </div>
          <div class="chapter-body" id="sections-control">
          </div>
        </div>
      </div>
      <div class="col col-md-d5 col-sm-6">
        <div class="chapter" id="chapter-component" data-id="component">
          <div class="chapter-heading fade scale show">
            <h4><i class="icon icon-columns"></i> <span class='name'>Components</span></h4>
          </div>
          <div class="chapter-body" id="sections-component">
          </div>
        </div>
      </div>
      <div class="col col-md-d5 col-sm-6">
        <div class="chapter" id="chapter-javascript" data-id="javascript">
          <div class="chapter-heading fade scale show">
            <h4><i class="icon icon-magic"></i> <span class='name'>JS Plugins</span></h4>
          </div>
          <div class="chapter-body" id="sections-javascript">
          </div>
        </div>
      </div>
      <div class="col col-md-d5 col-sm-6">
        <div class="chapter" id="chapter-view" data-id="view">
          <div class="chapter-heading fade scale show">
            <h4><i class="icon icon-list-alt"></i> <span class='name'>Views</span></h4>
          </div>
          <div class="chapter-body" id="sections-view">
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col col-md-3 col-sm-6">
        <div class="chapter" id="chapter-learn" data-id="learn">
          <div class="chapter-heading fade scale show">
            <h4><i class="icon icon-node"></i> <span class='name'>Community</span></h4>
          </div>
          <div class="chapter-body" id="sections-learn">
          </div>
        </div>
      </div>
      <div class="col col-md-3 col-sm-6">
        <div class="chapter" id="chapter-promotion" data-id="promotion">
          <div class="chapter-heading fade scale show">
            <h4><i class="icon icon-diamond"></i> <span class='name'>Recommendation</span></h4>
          </div>
          <div class="chapter-body" id="sections-promotion">
          </div>
        </div>
      </div>
      <div class="col col-md-3 col-sm-6">
        <div class="chapter" id="chapter-resource" data-id="resource">
          <div class="chapter-heading fade scale show">
            <h4><i class="icon icon-coffee"></i> <span class='name'>More</span></h4>
          </div>
          <div class="chapter-body" id="sections-resource">
          </div>
        </div>
      </div>
      <div class="col col-md-3 col-sm-6">
        <div class="chapter" id="chapter-contribution" data-id="contribution">
          <div class="chapter-heading fade scale show">
            <h4><i class="icon icon-heart"></i> <span class='name'>Contribution</span></h4>
          </div>
          <div class="chapter-body" id="sections-contribution">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<footer>
  <div class="container">
    <hr>
    <p class="text-muted small">Document Version <span class="doc-version"><i class="icon icon-spin icon-spinner-indicator"></i></span> &nbsp; Total <span class="text-page-count"></span> files, <span class="text-external-count"></span> links <span style="opacity:.5">|</span> <a id="beian" href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">鲁ICP备19039895号-3</a></p>
  </div>
</footer>

<!-- html template code snippet -->
<div class="template">
  <div class="card section fade scale slide-in-up-100 slide-in-right-50" id="sectionTemplate">
    <div class="card-heading">
      <i class="icon"></i>
      <h5><a class="name" href="###"></a></h5>
    </div>
    <div class="card-content">
      <ul class="topics">
      </ul>
    </div>
  </div>
  <div class="card-content section-preview icon-preview" id="iconPreviewTemplate">
    <div class="icons"><i class="icon icon-10x"></i><i class="icon icon-5x"></i><i class="icon icon-2x"></i><i class="icon"></i></div>
    <h3><small><i class="icon "></i></small> <span class="name color-accent"></span>  <small>Unicode: \<span class="unicode">f3dd</span><span class="alias"> · Alias：<span class="alias-values"></span></span></small></h3>
    <pre class="copyable"><code><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">&quot;icon <em class="name"></em>&quot;</span><span class="tag">&gt;&lt;/i&gt;</span></code></pre>
  </div>
  <button id="copyCodeBtn" data-html="true" data-animation="false" data-toggle="tooltip" data-title="Copy code" type="button" class="btn btn-copy-code"  data-tip-id="copyCodeTip" data-container="body"><i class="icon icon-copy"></i></button>
</div>

<!-- View switch dialog -->
<div class="modal fade" id="changeViewModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">shut down</span></button>
        <h4 class="modal-title">Which layout do you want to display the page?</h4>
      </div>
      <div class="modal-body">
        <div class="view-options">
          <a class="view-option view-option-single">
            <div class="view-shape">
              <div class="s-1"></div>
            </div>
            <div class="title strong">Single Page</div>
            <p class="text-muted">The page is displayed in the middle of the page. Hide the directory.</p>
          </a>
          <a class="view-option view-option-double">
            <div class="view-shape">
              <div class="s-1"></div>
            </div>
            <div class="title strong">Double Columns</div>
            <p class="text-muted">The directory is displayed on the left, and the page is displayed on the right It is better for widescreens.</p>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- jQuery (ZUI Javascript Component depends on jQuery) -->
<script src="../assets/jquery-3.4.1.min.js?v=1.10.0"></script>

<!-- ZUI Javascript Component -->
<script src="../dist/js/zui.js?v=1.10.0"></script>
<script src="../docs/js/doc.js?v=1.10.0"></script>

<!-- Enhanced document plugin -->
<script async src="../dist/lib/prettify/prettify.js?v=1.10.0"></script>

<!-- Statistic -->
<div class="hide"><script src="//s95.cnzz.com/stat.php?id=1253026255&web_id=1253026255"></script></div>
</body>
</html>
